<template>
	<div class="my-post">
		<div
			class="items"
			@click="$router.push({ path: `/article/${post.id}`, query: { type: '新闻' } })"
		>
			<!-- 图片 -->
			<div class="img"><van-image class="img-items" fit="cover" :src="post.img_url" /></div>
			<!-- 文本 -->
			<div class="text">
				<p class="top">{{ post.title | trimText }}</p>
				<div class="bottom">
					<p class="time">发表时间：{{ post.add_time | formatDate }}</p>
					<p class="click">点击：{{ post.click }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		post: Object
	}
};
</script>

<style scoped lang="less">
.items {
	box-sizing: border-box;
	width: 95vw;
	padding: 10px 0;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ccc;
	.img {
		width: 50px;
		height: 50px;
		margin-right: 10px;
		.img-items {
			width: 50px;
			height: 50px;
		}
	}
	.text {
		flex: 1;
		// background-color: pink;
		display: flex;
		height: 50px;
		flex-direction: column;
		justify-content: space-between;
		font-size: 14px;
		.bottom {
			display: flex;
			justify-content: space-between;
			color: rgba(0, 148, 255, 0.7);
		}
		.top {
			color: #777777;
			width: 300px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;
		}
	}
}
.my-post {
	display: flex;
	justify-content: center;
	text-align: center;
}
</style>
